<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple left">
          <div class="top">
            <div class="top-left">
              <div class="bgimg"></div>
              <div class="bgimg2"></div>
              <div class="title">工单统计 <span>(当天)</span></div>
              <div class="content">
                <div>
                  <h5>{{ DayWorkDate.total }}</h5>
                  <p>工单总数(个)</p>
                </div>
                <div>
                  <h5>{{ DayWorkDate.completedTotal }}</h5>
                  <p>完成工单(个)</p>
                </div>
                <div>
                  <h5>{{ DayWorkDate.cancelTotal }}</h5>
                  <p>拒绝工单(个)</p>
                </div>
                <div>
                  <h5>{{ DayWorkDate.workerCount }}</h5>
                  <p>运营人员个数(个)</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple left">
          <div class="top">
            <div class="top-left top-right" style="background: #fbefe8">
              <div class="bgimg2"></div>
              <div class="title">工单统计 <span>(当天)</span></div>
              <div class="content" style="color: #ff5757">
                <div>
                  <h5>{{ DayWorkDate2.total }}</h5>
                  <p>工单总数(个)</p>
                </div>
                <div>
                  <h5>{{ DayWorkDate2.completedTotal }}</h5>
                  <p>完成工单(个)</p>
                </div>
                <div>
                  <h5>{{ DayWorkDate2.workerCount }}</h5>
                  <p>进行工单(个)</p>
                </div>
                <div>
                  <h5>{{ DayWorkDate2.completedTotal }}</h5>
                  <p>取消工单(个)</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="17"
        ><div class="grid-content bg-purple bottom-left">
          <div class="title">
            <h4>工单状态</h4>

            <div class="title-right">
              <div class="block">
                <el-date-picker
                  ref="time"
                  style="width: 270px; height: 35px"
                  v-model="value"
                  type="daterange"
                  :start-placeholder="startTime"
                  :end-placeholder="endTime"
                  :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
              </div>
              <div class="right-2">
                <span :class="{ active: states === 'week' }" @click="week"
                  >周</span
                ><span :class="{ active: states === 'month' }" @click="month"
                  >月</span
                ><span :class="{ active: states === 'year' }" @click="year"
                  >年</span
                >
              </div>
            </div>
          </div>
          <div class="cotent">
            <div class="bgimg"><p>暂无数据</p></div>
          </div>
        </div></el-col
      >
      <el-col :span="7"
        ><div class="grid-content bg-purple bottom-right">
          <div class="title">
            <h4>人效排名（月度）</h4>
            <div>
              <el-form :model="form">
                <el-form-item>
                  <el-select placeholder="请选择地区" v-model="form.name">
                    <el-option
                      :label="item"
                      :value="item"
                      v-for="(item, index) in cityStreet"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="title-bottom">
            <div :class="{ active: state === true }" @click="state = true">
              运营人员
            </div>
            <div :class="{ active: state === false }" @click="state = false">
              运维人员
            </div>
          </div>
          <div class="cotent">
            <div class="bgimg"><p>暂无数据</p></div>
          </div>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import {
  getDayWork,
  getArea,
  getWorkState,
  getStatisticsTOP10
} from '@/api/staff'
export default {
  name: 'user-task-stats',
  async created () {
    this.getTime()
    console.log(this.endTime)
    // 获取运营人员（当天） 数据
    const res = await getDayWork(this.time)
    this.DayWorkDate = res[0]
    this.DayWorkDate2 = res[1]
    // 获取地区
    const res1 = await getArea(this.params)
    this.street = res1.currentPageRecords
    console.log(this.street)
    this.street.forEach((item) => {
      this.cityStreet.push(item.name)
    })
    this.getWorkState()
    this.getStatisticsTOP10()
  },
  mounted () {},
  components: {},
  props: {},
  data () {
    return {
      value: [],
      time: {
        start: '',
        end: ''
      },
      params: {
        pageIndex: 1,
        pageSize: 100000
      },
      street: {},
      cityStreet: [],
      DayWorkDate: {},
      DayWorkDate2: {},
      form: {
        name: ''
      },
      n: '', // 当前年
      y: '', // 当前月
      r: '', // 当前日
      states: 'year',
      state: true,
      startTime: '2022-01-01',
      endTime: '',
      weekTime: '',
      Top10: {
        startTime: '',
        endTime: '',
        flag: false,
        num: 0
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    formatDate (d) {
      const now = new Date(parseFloat(d))
      const year = now.getFullYear()
      let month = now.getMonth() + 1
      let date = now.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (date >= 0 && date <= 9) {
        date = '0' + date
      }
      let hour = now.getHours()
      let minute = now.getMinutes()
      let second = now.getSeconds()
      if (hour >= 0 && hour <= 9) {
        hour = '0' + hour
      }
      if (minute >= 0 && minute <= 9) {
        minute = '0' + minute
      }
      if (second >= 0 && second <= 9) {
        second = '0' + second
      }
      return (
        year +
        '-' +
        month +
        '-' +
        date +
        ' ' +
        hour +
        ':' +
        minute +
        ':' +
        second
      )
    },
    // 处理时间
    async getTime () {
      const myData = new Date()
      const year = myData.getUTCFullYear()
      let month = myData.getMonth() + 1
      let date = myData.getDate()
      let week = myData.getDay()
      week = week === 0 ? 7 : week
      // 补0
      month = month < 10 ? '0' + month : month
      date = date < 10 ? '0' + date : date
      this.time.start = `${year}-${month}-${date} 00:00:00`
      this.time.end = `${year}-${month}-${date} 23:59:59`
      const timestamp = Date.parse(`${year}-${month}-${date} 00:00:00`) // 将时间转换为时间戳
      const newtimestamp = timestamp - (week - 1) * 86400000 // 减去当前一周过的时间戳
      const weekdate = this.formatDate(newtimestamp) // 将时间戳转换为时间

      this.weekTime = weekdate

      this.endTime = `${year}-${month}-${date}`
      this.n = year
      this.y = month
      this.r = date
    },
    week () {
      this.states = 'week'
      this.startTime = this.weekTime.slice(0, 10)
      this.getWorkState()
    },
    month () {
      this.states = 'month'
      this.startTime = '2022-11-01'
      this.getWorkState()
    },
    year () {
      this.states = 'year'
      this.startTime = '2022-01-01'
      this.getWorkState()
    },
    // 工单状态没数据
    async getWorkState () {
      // this.startTime = this.n + '-' + this.y + '-' + '01'
      await getWorkState(this.startTime, this.endTime)
    },
    // 人效统计top10
    async getStatisticsTOP10 () {
      this.Top10.startTime = this.n + '-' + this.y + '-' + '01'
      this.Top10.endTime = this.n + '-' + this.y + '-' + this.r
      const res = await getStatisticsTOP10(this.Top10)
      console.log(res)
    }
  }
}
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #fff; //#f8fafd
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.left,
.right {
  height: 180px;
}
.bottom-left,
.bottom-right {
  height: 355px;
  border-radius: 15px;
}

.left {
  background: #f8fafd;
  .top {
    height: 170px;
    background: #f8fafd;
    display: flex;
    justify-content: space-between;
    .top-left {
      margin-right: 15px;
      width: 900px;
      background: #e9f3ff;
      border-radius: 15px;
      overflow: hidden;
      position: relative;
      .bgimg {
        background: url('@/assets/home-img1.png');
        width: 200px;
        height: 90px;
      }
      .bgimg2 {
        position: absolute;
        background: url('@/assets/user-task-stats.png') no-repeat;
        width: 160px;
        height: 120px;
        bottom: -20px;
        right: -25px;
      }
      .title {
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 17px;
        font-weight: 600;
        span {
          font-weight: 400;
          margin-left: 5px;
          font-size: 12px;
        }
      }
      .content {
        position: absolute;
        top: 50px;
        width: 100%;
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        div {
          text-align: center;
          h5 {
            color: #072074;
            font-size: 35px;
            text-shadow: rgba(7, 32, 116, 0.38) 0px 10px 20px,
              rgba(7, 32, 116, 0.46) 0px 6px 6px;
          }
          p {
            font-size: 12px;
            font-weight: 400;
            color: #a8a7e3;
          }
        }
      }
    }
    .top-right {
      h5 {
        color: #ff5757 !important;
        text-shadow: rgba(255, 87, 87, 0.38) 0px 10px 20px,
          rgba(255, 87, 87, 0.46) 0px 6px 6px !important;
      }
      .bgimg2 {
        background: url('@/assets/user-task-stats2.png') no-repeat;
        margin-bottom: 20px;
      }
      p {
        color: #de9690 !important;
      }
    }
  }
}
.bottom-right,
.bottom-left {
  height: 620px;
  overflow: hidden;
}
.bottom-left {
  padding-top: 5px;
  position: relative;
  .title {
    height: 50px;
    width: 100%;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    // h4 {
    //   font-weight: 400;
    //   font-size: 19px;
    // }
    .title-right {
      width: 450px;
      .block {
        width: 300px;
      }
      .right-2 {
        position: absolute;
        right: 0;
        top: 5px;
        margin-right: 30px;
        padding: 0 10px;
        width: 100px;
        height: 40px;
        margin-top: 5px;
        box-sizing: content-box;
        text-align: center;
        background: #f6f7f8; //f7fbff
        border-radius: 10px;
        display: flex;
        align-items: center;
        span {
          margin-top: 3px;
          padding-top: 0px;
          text-align: center;
          display: inline-block;
          // background: #f7fbff; //f7fbff
          cursor: pointer;
          width: 35px;
          height: 27px;
          line-height: 27px;
          font-size: 12px;
          // border: 1px solid #eef2f5;
        }
        .active {
          color: #000;
          border-radius: 10px;
          background: #fff;
          font-weight: 600;
          box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
        }
      }
    }
  }
  .cotent {
    position: relative;
    width: 100%;
    height: 600px;
    .bgimg {
      position: relative;
      position: absolute;
      width: 123px;
      height: 97px;
      background: url('http://likede2-admin.itheima.net/img/empty.87c4f71b.png')
        no-repeat;
      left: 50%;
      top: 45%;
      transform: translate(-50%, -50%);
      p {
        position: absolute;
        bottom: -25px;
        left: 35px;
      }
    }
  }
}
.bottom-right {
  padding: 10px;
  .title {
    h4 {
      padding-top: 10px;
    }
    display: flex;
    justify-content: space-between;
  }
  .title-bottom {
    width: 170px;
    height: 35px;
    background: #f6f7f8;
    font-size: 14px;
    padding-left: 10px;
    margin: 0 auto;
    border-radius: 15px;

    div {
      line-height: 25px;
      border-radius: 10px;
      cursor: pointer;
      margin: 5px 5px 0 5px;
      text-align: center;
      display: inline-block;
      width: 70px;
      height: 25px;
      color: #b4a3c5;
      // border: 1px solid skyblue;
    }
    .active {
      background: #fff;
      font-weight: 600;
      color: #000;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }
  }
  .cotent {
    position: relative;
    width: 100%;
    height: 600px;
    .bgimg {
      position: relative;
      position: absolute;
      width: 123px;
      height: 97px;
      background: url('http://likede2-admin.itheima.net/img/empty.87c4f71b.png')
        no-repeat;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      p {
        position: absolute;
        bottom: -25px;
        left: 35px;
      }
    }
  }
}

::v-deep .el-input__inner {
  height: 35px;
  width: 140px;
}
</style>
